<!-- 发布盲盒 -->
<template>
  <div class="coin">
        <NavBar2 :fnTitle="title"></NavBar2>
    <div class="content">
      <van-notify v-model="show2" type="success">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>保存成功</span>
      </van-notify>
      <div class="send_info">
        <textarea id="send_info_text" v-model="tabletext" placeholder="盲盒里有什么东西呢"></textarea>
      </div>
       <div class="send_function">
       <van-uploader :after-read="afterRead"  v-model="fileList" :deletable="true" ref="file">
         
      </van-uploader>   
      </div>
      <div class="btn_box"><button class="btn" @click="locationText">保存</button></div>
     
    </div>
  </div>
</template>

<script>
import NavBar2 from '@/components/NavBar2'
import Vue from 'vue'
import { Dialog } from 'vant'
import { Uploader } from 'vant';
Vue.use(Dialog)
Vue.use(Uploader);
export default {
  // created() {
  //   this.GetAll()
  // },
  data() {
    return {
      title: '发布盲盒',
      checked: true,
      value: '',
      show2:false,
      tabletext: '',
      fileList:[],
      fileList_get:[],
    }
  },
  components: {
    NavBar2
  },
  methods: {
    locationText() {
      var val = this.tabletext
      sessionStorage.setItem('GiftText', val)
      sessionStorage.setItem("picture1",this.fileList_get[0])
      sessionStorage.setItem("picture2",this.fileList_get[1])
      // console.log(this.fileList_get[0]);
      // console.log(this.fileList_get[1]);
      this.showNotify()
    },
    showNotify() {
      this.show2 = true;
      setTimeout(() => {
        this.show2 = false;
      }, 2000);
    },
    // 图片
    async afterRead(files) {
    //  console.log(files);
      // console.log(files.file);
      // var file = files.file
       const file = new FormData();
       file.append("file", files.file);
      //  console.log(file)
       const { data: res } = await this.$http.post('/api/file/photo', file ,{
         headers: {
            "content-type": "multipart/form-data"
          },
       })
      //  console.log("1111");
      //  console.log(res);
      this.fileList_get.push(res)
      if(this.fileList_get.length >= 3)
      {
        alert("只能上传2张图片")
        this.$delete(this.fileList_get,2)
        this.$delete(this.fileList,2)
      }
     
    
    },

  
  }
}
</script>

<style scoped>
 .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
.memedata {
  text-align: center;
}
.info_show {
  height: 500px;
  /* width: 300px; */
  overflow: hidden;
  overflow-y: scroll;
}
.btn_box {
  text-align: center;
}
.btn {
  margin-top: 1%;
  border: .026667rem solid #fff;
  border-radius: .533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: .8rem;
}
#send_info_text {
  margin-top: 5px;
  display: block;
  width: calc(90vw);
  padding: 10px;
  height: calc(40vh);
  margin: 0 auto;
  background-color: rgba(228, 228, 228, 0.644);
  border: none;
  outline: none;
  resize:none;
}
.send_function {
  margin-top: 5px;
  width: calc(90vw);
  padding: 10px;
  margin: 0 auto;
  /* vertical-align: middle; */
}
.send_function span {
  /* display: inline-block; */
  /* height: 25px; */
  vertical-align: middle;
  margin-left: 15px;
  font-size: 15px;
}
.fun {
  height: 50px;
  padding: 0 15px;
  margin: 10px 0;
  /* vertical-align: middle!important; */
}
.van-icon {
  vertical-align: middle!important;
}
.van-switch {
  float: right;
}
</style>
